<template>
  <div class="mood-palette">
    <h2>智能心情调色板</h2>
    
    <div class="mood-input">
      <div class="mood-sliders">
        <div class="slider-group">
          <label>快乐程度</label>
          <input type="range" v-model="moodValues.happiness" min="0" max="100">
          <span>{{ moodValues.happiness }}%</span>
        </div>
        
        <div class="slider-group">
          <label>能量水平</label>
          <input type="range" v-model="moodValues.energy" min="0" max="100">
          <span>{{ moodValues.energy }}%</span>
        </div>
        
        <div class="slider-group">
          <label>压力程度</label>
          <input type="range" v-model="moodValues.stress" min="0" max="100">
          <span>{{ moodValues.stress }}%</span>
        </div>
      </div>
      
      <button @click="generatePalette" class="generate-btn">生成配色</button>
    </div>

    <div class="color-palette">
      <div v-for="(color, index) in colorPalette" 
           :key="index" 
           class="color-box"
           :style="{ backgroundColor: color }">
        <span>{{ color }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MoodColorPalette',
  data() {
    return {
      moodValues: {
        happiness: 50,
        energy: 50,
        stress: 50
      },
      colorPalette: []
    }
  },
  methods: {
    generatePalette() {
      // 创新算法：基于心情值生成和谐的配色方案
      const baseHue = this.calculateBaseHue();
      const palette = this.generateHarmonicColors(baseHue);
      this.colorPalette = palette;
    },
    
    calculateBaseHue() {
      // 根据心情值计算基础色相
      const happiness = this.moodValues.happiness / 100;
      const energy = this.moodValues.energy / 100;
      const stress = this.moodValues.stress / 100;
      
      // 快乐度影响黄色区域 (60°)
      // 能量影响红色区域 (0°)
      // 压力影响蓝色区域 (240°)
      return Math.round(
        (happiness * 60 + energy * 0 + stress * 240) /
        (happiness + energy + stress)
      );
    },
    
    generateHarmonicColors(baseHue) {
      const colors = [];
      const saturation = 70 + (this.moodValues.energy / 100) * 30;
      const lightness = 50 + (this.moodValues.happiness / 100) * 20;
      
      // 生成五色和谐配色
      colors.push(`hsl(${baseHue}, ${saturation}%, ${lightness}%)`);
      colors.push(`hsl(${(baseHue + 72) % 360}, ${saturation}%, ${lightness}%)`);
      colors.push(`hsl(${(baseHue + 144) % 360}, ${saturation}%, ${lightness}%)`);
      colors.push(`hsl(${(baseHue + 216) % 360}, ${saturation}%, ${lightness}%)`);
      colors.push(`hsl(${(baseHue + 288) % 360}, ${saturation}%, ${lightness}%)`);
      
      return colors;
    }
  }
}
</script>

<style scoped>
.mood-palette {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.mood-input {
  margin: 30px 0;
}

.slider-group {
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.slider-group label {
  width: 100px;
  text-align: right;
}

.slider-group input {
  width: 200px;
}

.generate-btn {
  margin: 20px;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.color-palette {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.color-box {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: white;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}

.color-box:hover {
  transform: scale(1.05);
}
</style> 